import React, { useEffect, useState,useContext } from "react";
import { Link } from "umi";
import { Pagination } from "antd";
import {
  RightOutlined,
  CaretRightOutlined,
  UserOutlined,
} from "@ant-design/icons";
import IconFont from "@/components/iconfont";
import { highquality, playlist, getPlaylistHot} from "@/api";
import MyImg from '@/components/myimg'
import {contxetType} from '@/interfaces/types'
import MyContent from "@/store/my-context";
import styles from "./index.less";
import {playMusicsByPlaylistId} from '@/store/functions'
interface PropsType {
  parentelement: any;
}

const songList: React.FC<PropsType> = () => {
  const [songData, setSongData] = useState<any>(null);
  const [list, setList] = useState([]);
  const [tags, setTags] = useState<any>([]);
  const [totalCount, setTotalCount] = useState(0);
  const [queryData, setQueryData] = useState({
    offset: 1,
    cat: '全部'
  });
  const { state,dispatch } = useContext<contxetType>(MyContent);
  const limit: number = 100
  const [beforeMS, setBeforeMS] = useState<number | undefined>(undefined)
  const playSongList = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, playlistId: number) => {
    event.stopPropagation()
    if(playlistId){
      playMusicsByPlaylistId(playlistId,{text:'歌单页面',href:'当前链接'},state).then(data=>{
        dispatch(data)
      },reason=>console.log(reason))
    }
  }
  useEffect(() => {
    getPlaylistHot().then((res) => {
      setTags(res.tags);
    });
  }, []);
  useEffect(() => {
    let paras: Object | null = null
    if (beforeMS) {
      paras = { before: beforeMS, limit: 1 }
    } else {
      const paras = { limit: 1 }
    }
    highquality(paras).then((res) => {
      setSongData(res.playlists[0]);
    });
    paras = null
    playlist({
      cat: queryData.cat,
      limit: limit,
      offset: limit * (queryData.offset - 1),
    }).then((res) => {
      let { playlists, total } = res;
      setList(playlists);
      setTotalCount(total);
      setBeforeMS(playlists[0].updateTime)
      // console.log(res)
      playlists = null
      total = null
    });
  }, [queryData]);
  return (
    <>
      {songData
        ? (<div className={styles["banner"]}>
          <MyImg
            src={songData.coverImgUrl}
            imgSize={{ width: 140 }}
          />
          <div className={styles["banner-content"]}>
            <Link to="/song_list" className={styles["banner-btn"]}>
              <IconFont
                type="iconhuangguan"
                style={{ marginRight: "5px", fontSize: "14px" }}
              />
          精品歌单
        </Link>
            <h2>{songData.name}</h2>
            <p>{songData.copywriter}</p>
          </div>
        </div>)
        : (<></>)
      }
      <div className={styles["select-wrap"]}>
        <a className={styles["select-btn"]}
          onClick={() => {
            setQueryData({
              offset: 1,
              cat: '全部'
            })
          }}>
          全部歌单 <RightOutlined />
        </a>
        <div className={styles["btn-wrap"]}>
          {tags.map((item: any, index: number) => (
            <a 
            key={`tags${tags?.id || 'index'+index}`}
            onClick={() => {
              setQueryData({
                offset: 1,
                cat: item.name
              })
            }} className={queryData.cat === item.name ? styles['btn-selected'] : styles["btn-link"]}>
              {item.name}
            </a>
          ))}
        </div>
      </div>
      <ul className={styles["song-list"]}>
        {list.map((item: any, index: number) => (
          <div 
          className={styles['song-list-one']}
          key={`song-listindex${index}`}
          >
            <div className={styles["song-info"]}>
              <Link to='/songlist_detail' key={`song-info${index}`} >
                <MyImg
                  src={item.coverImgUrl}
                  imgSize={{ width: 175 }} />
              </Link>
              <div className={styles["song-top"]}>
                <CaretRightOutlined />
                <span>{item.playCount}</span>
              </div>
              <div className={styles["song-bottom"]}>
                <UserOutlined style={{ transform: "translate(0,-1px)" }} />{" "}
                {item?.creator?.nickname}
              </div>
              <div className={styles["song-play"]} onClick={event => playSongList(event, item?.id)}>
                <CaretRightOutlined />
              </div>
            </div>
            <p>{item.name}</p>
          </div>
        ))}
      </ul>
      <div className={styles["pagination-wrap"]}>
        <Pagination
          current={queryData.offset}
          defaultPageSize={limit}
          onChange={(offset) => {
            setQueryData({ ...queryData, offset });
          }}
          total={totalCount}
          showSizeChanger={false}
        />
      </div>
    </>
  );
};
export default songList;
